<template>
  <view class="page">
    <my-nav title="疗愈">
      <view class="search">
        <tn-icon name="search"></tn-icon>
        <input
          type="text"
          v-model="keyword"
          placeholder="找您喜欢的课程"
          placeholder-style="color:#fff;"
          @input="doFilter"
        />
      </view>
    </my-nav>

    <!-- 选择标签 -->
     <tn-scroll-list :indicator="false" >
      <view class="tag-container">
        <view
          v-for="tag in tags"
          :key="tag.id"
          class="tag-item"
          :class="currentCourseTag===tag.id?'active':''"
          @click="changeTag(tag.id)"
        >
          {{tag.name}}
        </view>
      </view>
    </tn-scroll-list>

    <view class="course-list">
      <!-- 轮播课程列表 -->
      <view class="swiper-courseList">
        <swiper
      
          :current="currentIndex"
          :circular="true"
          previous-margin="80rpx"
          next-margin="80rpx"
          :interval="3000"
          :duration="100"
      
          @change="swierChange"
        >
            <swiper-item v-for="(course,i) in courseList" :key="course.id">
              <image :src="course.cover" class="slide-image" :class="currentIndex === i?'swiper-active':''" @click="navToDetail"></image>
            </swiper-item>
        </swiper>
        <!-- 轮播点点 -->
         <view class="pagination-dots" v-if="courseList.length==1">
          <view class="dot active"></view>
        </view>
         <view class="pagination-dots" v-else-if="courseList.length==2">
          <view class="dot" @click="swipePage(0)" :class="currentIndex===0?'active':''"></view>
          <view class="dot" @click="swipePage(2)" :class="currentIndex===courseList.length-1?'active':''"></view>
        </view>
        <view class="pagination-dots" v-else>
          <view class="dot" @click="swipePage(0)" :class="currentIndex===0?'active':''"></view>
          <view class="dot" @click="swipePage(1)" :class="currentIndex!=0&&currentIndex!=courseList.length-1?'active':''"></view>
          <view class="dot" @click="swipePage(2)" :class="currentIndex===courseList.length-1?'active':''"></view>
        </view>
      </view>
      <!-- 展示轮播到的课程信息 -->

      <view class="current-course-info">
        <view class="course-name">{{courseList[currentIndex].name}}</view>
        <view class="course-desc">{{courseList[currentIndex].desc}}</view>
      </view>
    </view>

    </view>
  
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { Swiper, SwiperSlide } from 'swiper/vue';
import { Autoplay } from 'swiper/modules';
const modules = [Autoplay];
import defaultImg from '../../static/首页/u4.png'
// import { setStorage, getStorage } from '../../utils/storage';

type Course = { id: string; name: string;desc:string|''; type: string; cover: string; };
const courseList: Course[] = [
  { id: 'c1', name: '正念冥想基础', type: '正念', cover: defaultImg,desc:'文案内容' },
  { id: 'c2', name: '声音疗愈体验', type: '声音', cover: defaultImg,desc:'文案内容' },
  { id: 'c3', name: '脉轮平衡课程', type: '能量', cover: defaultImg,desc:'文案内容' },
  { id: 'c4', name: '脉轮平衡课程2', type: '能量2', cover: defaultImg,desc:'文案内容2' }
];

//所有课程标签
const tags = ref([
  {id:'0',name:'全部'},
  {id:'1',name:'行业名称1'},
  {id:'2',name:'行业名称2'},
  {id:'3',name:'行业名称3'},
  {id:'4',name:'行业名称4'},
  {id:'5',name:'行业名称5'},
])
const currentCourseTag = ref(tags.value[0].id)
function changeTag(tagId:string){
  currentCourseTag.value = tagId;
  //请求课程数据
}
const currentIndex = ref(0);
function swierChange(e:any){
  currentIndex.value = e.detail.current
}
function swipePage(index:number){
  if(index===0){
    if(currentIndex.value!=0){
      currentIndex.value-=1
    }
  }else if(index===1){
    if(currentIndex.value==0){
      currentIndex.value+=1
    }else if(currentIndex.value===courseList.length-1){
      currentIndex.value-=1
    } 
  }else if(index===2){  
    if(currentIndex.value!=courseList.length-1){
      currentIndex.value+=1
    }
  }
}
// 导航到课程详情
function navToDetail(){
  uni.navigateTo({
    url:'/pages/courses/detail'
  })
}


const keyword = ref('');
const filtered = ref<Course[]>(courseList);
const doFilter = () => {
  const k = keyword.value.trim();
  if (!k) { filtered.value = courseList; return; }
  filtered.value = courseList.filter(c => c.name.includes(k) || c.type.includes(k));
};

</script>

<style lang="scss" scoped>
.page { min-height: 100vh; background: #d8d3cd;display: flex; flex-direction: column; }
.header { padding: 24rpx; font-size: 32rpx; font-weight: 600; }
.search { 
  border-radius: 30rpx;
  background-color: #c8bfb2;
  display: flex;
  align-items: center;
  gap:20rpx;
  color: #fff;
  font-size: 30rpx;
  padding: 10rpx 12rpx;width: 100%;
  input{
    &::placeholder{
      color: #fff;
    }
    &.input-placeholder{
      color: #fff;
    }
  }
 }

.tag-container{
  display: flex;
  padding: 0 20rpx;
  gap: 25rpx;
  .tag-item{
    padding: 0 25rpx;
    height: 55rpx;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    white-space: nowrap;
    font-size: 25rpx;
    border-radius: 25rpx;
    color: #fff;
    background-color: #beb5a8;
    &.active{
      background-color: #b1a692;
    }
  }
}

.course-list{
  flex: 1;
  display: flex;
  flex-direction: column;
  .swiper-courseList{
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  .current-course-info{
    margin-top: 30rpx;
    display: flex ;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20rpx;
    .course-name{
      display: flex;
      align-items: center;
      padding: 0 35rpx;
      height: 56rpx;
      border-radius: 28rpx;
      border: 1px solid #766e65;
      font-size: 35rpx;
      font-weight: 600;
      margin-bottom: 30rpx;
    }
    .course-desc{
      max-width: 400rpx;
      overflow: hidden;
      -webkit-line-clamp: 2;			/*表示显示行数，设置显示几行，其余超出隐藏*/
      display: -webkit-box;
      -webkit-box-orient: vertical;
      text-overflow: ellipsis;		/*溢出用省略号*/
      white-space: normal;
      word-break: break-all;
      margin-bottom: 50rpx;
      font-size: 24rpx;
      color: #56534e;
    }
  }
}

swiper {
 flex: 1;
  .slide-image {
    box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.1);
    position: absolute;
    height: 60%;
    width: 570rpx;
    border-radius: 15rpx;
    z-index: 5;
    opacity: 0.7;
    top: 18%;
    margin: 0 20rpx;
    &.swiper-active {
      opacity: 1;
      z-index: 10;
      height: 90%;
      width: 572rpx;
      top: 7%;
      transition: all 0.2s ease-in 0s;
    }
  }
}

.pagination-dots {
    // 位于中间
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    .dot {
      width: 10rpx;
      height: 10rpx;
      border-radius: 50%;
      background: #c5b1a5;
      transition: all 0.3s ease;
      opacity: 0.4;
      border: 1px solid transparent;
      
      &.active {
        width: 15rpx;
        height: 15rpx;
        background: #fff;
        opacity: 1;
        border: none;
      }
    }
    
    &.white-dots {
      .dot {
        background: transparent;
        border: 1px solid rgba(255, 255, 255, 0.4);
        
        &.active {
          background: #fff;
          border: none;
          opacity: 1;
        }
      }
    }
  }
</style>


